<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ctools</title>
  <style>
    html, body {
      height: 100%;
      width: 100%;
      padding: 0;
      margin: 0;
    }

    body {
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .github-corner {
      position: fixed;
      top: 0;
      right: 0;
      height: 60px;
      width: 60px;
      color: white;
      fill: green;
    }

    .top-nav {
      flex: 0 0 auto;
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-bottom: 1px solid green;
      line-height: 60px;
    }

    .top-nav > div:first-child {
      width: 80px;
      padding: 0 20px;
      background-color: green;
      color: white;
      height: 100%;
    }

    .top-nav > div:last-child {
      flex: 1 1 0;
      padding: 0 20px;
    }
    .content{
      flex: 1 1 0;
      padding: 0 100px;
      overflow: auto;
    }
    .commond{
      display: flex;
      flex-direction: column;
      padding: 20px;
    }
    .commond>span:first-child{
      font-size: 16px;
      color: #999;
    }
    .commond>span:not(:first-child){
      font-size: 12px;
      padding: 4px 0;
      color: #666;
    }
    .commond a {
      color: green;
    }
    ul{
      color: #666;
      font-size: 12px;
    }
    li{
      list-style: none;
      line-height: 24px;
    }
  </style>
</head>
<body>
<a href="https://gitee.com/DeyaoCai/ctools" class="github-corner" target="_blank" aria-label="View source on Github">
  <svg viewBox="0 0 250 250" aria-hidden="true">
    <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
    <path
      d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
      fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
    <path
      d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
      fill="currentColor" class="octo-body"></path>
  </svg>
</a>
<div class="top-nav">
  <div>ctools</div>
  <div></div>
</div>
<div class="content">
  <div class="commond">
    <span>全局安装ctools</span>
    <span>$ sudo npm install ctools -g</span>
  </div>
  <div class="commond">
    <span>拉取代码</span>
    <span>$ cdevtools getDemo</span>
  </div>

  <div class="commond">
    <span>开启服务</span>
    <span>$ cd ./vue-dev-tool</span>
    <span>$ npm run appExpress</span>
    <span>若服务启动后未自动打开网站 <a href="http://localhost:9898" target="_blank">请点击</a></span>
  </div>
</div>

<script>
  const contentStr = `这个工具是为了在同时开发业务代码（目前仅在vue项目中使用测试过）和所依赖的公共组件库而开发的；
    旨在在开发阶段跳过频繁的发包装包过程，直接修改公共组件库，在业务项目中可以立刻响应；
    其原理是：
      利用webpack的别名 和 node模块查找优先级机制，来修改模块的引用路径；

    在vue项目执行build时，
    webpack-dev-server --inline --progress --config 指定配置文件

    所以我们来修改一下配置文件，向配置的 resolve.alias 添加我们需要同时开发的项目的本地仓库目录 包名： 本地仓库地址；
    but：在查找模块时，如果在当前的目录找不到，他就会去找node_modules 目录；
    因为我们要跑项目，可以是下载了依赖的，这时，他就会找到我们下载的依赖包，而不是本地仓库地址。
    所以：我们可以将依赖项目的仓库放在我们的业务项目仓库下，然后在.gitIgnore排除掉这个文件夹就好了；
    再but一次：这个依赖包不仅仅被这个项目使用，那么我们不能每个依赖他的项目中都这么干吧；
    所以我们可以将业务项目除了源码外的其他文件复制到上级目录，
    这样上级目录就成了一个可以随便折腾的临时项目了；
    这样我们的上级目录下有一个package.json，我们 npm install 一下，所有依赖装好了，
    然后将依赖的组件项目git到同级目录，
    然后我们修改上级目录下的webpack相关的配置文件，然后修改一下入口文件。
    貌似就大功告成了。

    是的，如果仅仅是要启动这个项目， 这么干确实够了；

    但是我是一个想折腾的人。
    所以， 我整个可这么一个项目；

    这个项目干了些什么呢？

    这个项目是一个命令行工具；
    npm 全局安装后，
    可以执行 cdevtools getDemo；
    他将会在当前目录下，拉去 vue-dev-tool 项目；
    接着在根目录下根据根目录下的ctools.conf目录下的配置来拉取基础的工具仓库（配置中 group属性未 public的）：
    其中 ctools 就是本项目。
    其余的两个
      1，proxy项目（可视化工具的服务）；
      2，platform项目：（可视化前面）；
    是vue-dev-tool 项目的可视化工具；

    其中在拉取proxy项目时， 会同时拉取依赖；
    这样在执行完 cdevtools getDemo 之后；
    进入到 vue-dev-tool 项目中执行 npm run appExpress 就可以开启服务了。
    这时会自动打开 <a href="http://localhost:9898" target="_blank">http://localhost:9898</a>

    ctools.conf 目录下的每个子目录里有一个conf配置文件：
    其中目前可以用的字段有：
    group: 任意字符串，目前占用一个public分组来存放 vue-dev-tool需要使用到的仓库；
    name： 在可视化界面中 该分组显示的名称；
    mainRepertory： 主️仓库，在拉取代码时，将该仓库的除src目录拷贝到该分组的根目录中
    outPutPath： 如果使用本工具的打包，将打包后的放在该目录下
    imgUrl： 该分组的背景图片
    repertoryList：[repertory] 该分组的仓库列表；
    repertoryPath： 该分组存放在 vue-dev-tool 根目录下的某个子目录名称

    repertory:{
      repertory: 仓库远程地址；
      disabled： 是否启用该仓库；
      其余字段会在拉取仓库或者其他时刻自动生成
    }`
  window.onload = function () {
    const list = contentStr.split(/\n/);
    const ul = document.createElement("ul");
    ul.innerHTML = list.map(item => `<li>${item.replace(/ /g, "&nbsp")}</li>`).join("");
    document.querySelector(".content").appendChild(ul);
  }
</script>
</body>
</html>
